<template>
	<view class="store-manage-page">
		<view class="card info-card">
			<view class="title">{{ storeInfo.name }}</view>
			<view class="desc">等级：{{ storeInfo.level || '普通' }}</view>
			<view class="desc">地址：{{ storeInfo.address }}</view>
			<view class="desc">联系人：{{ storeInfo.contact }}（{{ storeInfo.phone }}）</view>
		</view>

		<view class="card">
			<view class="section-title">机构教练（{{ coaches.length }}）</view>
			<scroll-view scroll-x style="white-space:nowrap;">
				<view v-for="item in coaches" :key="item.id" class="coach-item">
					<image :src="item.avatar" mode="aspectFill" class="avatar" />
					<view>{{ item.name }}</view>
				</view>
			</scroll-view>
		</view>

		<view class="card">
			<view class="section-title">门店订单统计</view>
			<view class="stats-row">
				<view class="stat-box">
					<view class="num yellow">{{ orderStats.total }}</view>
					<view>总订单</view>
				</view>
				<view class="stat-box">
					<view class="num">{{ orderStats.finished }}</view>
					<view>已上课</view>
				</view>
				<view class="stat-box">
					<view class="num">{{ orderStats.unfinished }}</view>
					<view>未上课</view>
				</view>
				<view class="stat-box">
					<view class="num">{{ orderStats.cancelled }}</view>
					<view>已取消</view>
				</view>
				<view class="stat-box">
					<view class="num">{{ orderStats.refunded }}</view>
					<view>已退费</view>
				</view>
			</view>
		</view>

		<view class="card">
			<view class="section-title">门店佣金统计</view>
			<view class="stats-row">
				<view class="stat-box">
					<view class="num yellow">{{ commissionStats.total }}</view>
					<view>所有佣金</view>
				</view>
				<view class="stat-box">
					<view class="num">{{ commissionStats.settled }}</view>
					<view>已结算</view>
				</view>
				<view class="stat-box">
					<view class="num">{{ commissionStats.unsettled }}</view>
					<view>未结算</view>
				</view>
				<view class="stat-box">
					<view class="num">{{ commissionStats.cancelled }}</view>
					<view>已取消</view>
				</view>
				<view class="stat-box">
					<view class="num">{{ commissionStats.refunded }}</view>
					<view>已退款</view>
				</view>
			</view>
			<button class="black-btn mt30" @click="gotoWithdraw">佣金提现</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				storeInfo: {
					name: '门店名称',
					level: '金牌',
					address: '',
					contact: '',
					phone: ''
				},
				coaches: [],
				orderStats: {
					total: 0,
					finished: 0,
					unfinished: 0,
					cancelled: 0,
					refunded: 0
				},
				commissionStats: {
					total: 0,
					settled: 0,
					unsettled: 0,
					cancelled: 0,
					refunded: 0
				}
			}
		},
		onShow() {
			// 拉取数据
			// 门店信息
			this.$http({
				url: '/api/store/info',
				method: 'get'
			}).then(res => {
				if (res.code === 1) this.storeInfo = res.data;
			});
			// 教练
			this.$http({
				url: '/api/store/coaches',
				method: 'get'
			}).then(res => {
				if (res.code === 1) this.coaches = res.data;
			});
			// 订单统计
			this.$http({
				url: '/api/store/order_stats',
				method: 'get'
			}).then(res => {
				if (res.code === 1) this.orderStats = res.data;
			});
			// 佣金统计
			this.$http({
				url: '/api/store/commission_stats',
				method: 'get'
			}).then(res => {
				if (res.code === 1) this.commissionStats = res.data;
			});
		},
		methods: {
			gotoWithdraw() {
				this.$api.navigate('/pages/store/withdraw');
			}
		}
	}
</script>

<style scoped>
	.store-manage-page {
		background: #181818;
		min-height: 100vh;
		padding: 30rpx;
		color: #fff;
	}

	.card {
		background: #232323;
		border-radius: 18rpx;
		padding: 30rpx;
		margin-bottom: 32rpx;
	}

	.info-card .title {
		font-size: 36rpx;
		color: #fff;
		margin-bottom: 10rpx;
	}

	.info-card .desc {
		color: #bbb;
		font-size: 26rpx;
		margin-bottom: 6rpx;
	}

	.section-title {
		color: #FFCF00;
		font-size: 30rpx;
		margin-bottom: 16rpx;
	}

	.stats-row {
		display: flex;
		flex-wrap: wrap;
	}

	.stat-box {
		flex: 1 0 40%;
		min-width: 120rpx;
		margin-bottom: 18rpx;
		text-align: center;
	}

	.num {
		font-size: 34rpx;
		color: #fff;
		font-weight: bold;
	}

	.yellow {
		color: #FFCF00;
	}

	.coach-item {
		display: inline-block;
		margin-right: 30rpx;
		text-align: center;
	}

	.avatar {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		background: #444;
		margin-bottom: 10rpx;
	}

	.mt30 {
		margin-top: 30rpx;
	}

	.black-btn {
		background: #FFCF00;
		color: #111;
		border-radius: 12rpx;
		font-size: 32rpx;
		width: 70%;
		margin: 0 auto;
	}
</style>